<%@page import="java.net.URLEncoder"%>
<%@page import="java.io.FileInputStream"%>
<%@page import="java.io.BufferedReader"%>
<%@page import="java.io.InputStreamReader"%>
<%@page import="java.io.File"%>
<%@page import="java.net.URLDecoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String strDir = request.getParameter("path");
	String source = "";//源代码
	String prefix = "";
	String mode = "text";//文件类型 默认文本文件
	String error = "";

	if (strDir != null && !"".equals(strDir)) {
		strDir = URLDecoder.decode(strDir, "UTF-8");//路径解码
		File file = new File(strDir);
		if (file.exists() && file.isFile()) {//文件存在并且是文件(非文件夹)
			prefix=strDir.substring(strDir.lastIndexOf(".")+1);//获取后缀名
			InputStreamReader isr = new InputStreamReader(
					new FileInputStream(file), "UTF-8");
			BufferedReader bfdreader = new BufferedReader(isr);
			String str_line = "";
			while ((str_line = bfdreader.readLine()) != null) {
				source += "\r\n" + str_line;
			}
			source = URLEncoder.encode(source, "UTF-8");
			bfdreader.close();
		}
	}
	
	prefix = prefix.toLowerCase();//转换为小写
	if("text".equals(prefix)){
		mode = "text";
	}else if("sql".equals(prefix)){ 
		mode = "sql";
	}else if("json".equals(prefix)){ 
		mode = "json";
	}else if("xml".equals(prefix)){ 
		mode = "xml";
	}else if("html".equals(prefix) ||"htm".equals(prefix)){ 
		mode = "html";
	}else if("js".equals(prefix)){ 
		mode = "javascript";
	}else if("css".equals(prefix)){ 
		mode = "css";
	}else if("java".equals(prefix)){ 
		mode = "java";
	}else if("jsp".equals(prefix)){ 
		mode = "jsp";
	}else if("php".equals(prefix)){ 
		mode = "php";
	}
	
%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文件源码</title>
<style type="text/css" media="screen">
#editor {
  height: 700px;
  margin-top: 10px;
}

</style>
</head>
<body onload="load();">

	<div id="header">
		<label for="modeEl">mode</label> 
		<select size="1" id="modeEl" onchange="modeChange();">
			<option value="abap">ABAP</option>
			<option value="actionscript">ActionScript</option>
			<option value="ada">ADA</option>
			<option value="apache_conf">Apache Conf</option>
			<option value="asciidoc">AsciiDoc</option>
			<option value="assembly_x86">Assembly x86</option>
			<option value="autohotkey">AutoHotKey</option>
			<option value="batchfile">BatchFile</option>
			<option value="c9search">C9Search</option>
			<option value="c_cpp">C/C++</option>
			<option value="cirru">Cirru</option>
			<option value="clojure">Clojure</option>
			<option value="cobol">Cobol</option>
			<option value="coffee">CoffeeScript</option>
			<option value="coldfusion">ColdFusion</option>
			<option value="csharp">C#</option>
			<option value="css">CSS</option>
			<option value="curly">Curly</option>
			<option value="d">D</option>
			<option value="dart">Dart</option>
			<option value="diff">Diff</option>
			<option value="dockerfile">Dockerfile</option>
			<option value="dot">Dot</option>
			<option value="erlang">Erlang</option>
			<option value="ejs">EJS</option>
			<option value="forth">Forth</option>
			<option value="ftl">FreeMarker</option>
			<option value="gherkin">Gherkin</option>
			<option value="glsl">Glsl</option>
			<option value="golang">Go</option>
			<option value="groovy">Groovy</option>
			<option value="haml">HAML</option>
			<option value="handlebars">Handlebars</option>
			<option value="haskell">Haskell</option>
			<option value="haxe">haXe</option>
			<option value="html">HTML</option>
			<option value="html_ruby">HTML (Ruby)</option>
			<option value="ini">INI</option>
			<option value="jack">Jack</option>
			<option value="jade">Jade</option>
			<option value="java">Java</option>
			<option value="javascript">JavaScript</option>
			<option value="json">JSON</option>
			<option value="jsoniq">JSONiq</option>
			<option value="jsp">JSP</option>
			<option value="jsx">JSX</option>
			<option value="julia">Julia</option>
			<option value="latex">LaTeX</option>
			<option value="less">LESS</option>
			<option value="liquid">Liquid</option>
			<option value="lisp">Lisp</option>
			<option value="livescript">LiveScript</option>
			<option value="logiql">LogiQL</option>
			<option value="lsl">LSL</option>
			<option value="lua">Lua</option>
			<option value="luapage">LuaPage</option>
			<option value="lucene">Lucene</option>
			<option value="makefile">Makefile</option>
			<option value="matlab">MATLAB</option>
			<option value="markdown">Markdown</option>
			<option value="mel">MEL</option>
			<option value="mysql">MySQL</option>
			<option value="mushcode">MUSHCode</option>
			<option value="nix">Nix</option>
			<option value="objectivec">Objective-C</option>
			<option value="ocaml">OCaml</option>
			<option value="pascal">Pascal</option>
			<option value="perl">Perl</option>
			<option value="pgsql">pgSQL</option>
			<option value="php">PHP</option>
			<option value="powershell">Powershell</option>
			<option value="prolog">Prolog</option>
			<option value="properties">Properties</option>
			<option value="protobuf">Protobuf</option>
			<option value="python">Python</option>
			<option value="r">R</option>
			<option value="rdoc">RDoc</option>
			<option value="rhtml">RHTML</option>
			<option value="ruby">Ruby</option>
			<option value="rust">Rust</option>
			<option value="sass">SASS</option>
			<option value="scad">SCAD</option>
			<option value="scala">Scala</option>
			<option value="smarty">Smarty</option>
			<option value="scheme">Scheme</option>
			<option value="scss">SCSS</option>
			<option value="sh">SH</option>
			<option value="sjs">SJS</option>
			<option value="space">Space</option>
			<option value="snippets">snippets</option>
			<option value="soy_template">Soy Template</option>
			<option value="sql">SQL</option>
			<option value="stylus">Stylus</option>
			<option value="svg">SVG</option>
			<option value="tcl">Tcl</option>
			<option value="tex">Tex</option>
			<option value="text">Text</option>
			<option value="textile">Textile</option>
			<option value="toml">Toml</option>
			<option value="twig">Twig</option>
			<option value="typescript">Typescript</option>
			<option value="vala">Vala</option>
			<option value="vbscript">VBScript</option>
			<option value="velocity">Velocity</option>
			<option value="verilog">Verilog</option>
			<option value="xml">XML</option>
			<option value="xquery">XQuery</option>
			<option value="yaml">YAML</option>
		</select> 
		<label for="themeEl">Theme</label> 
		<select size="1" id="themeEl" onchange="themeChange();">
			<optgroup label="bright">
				<option value="chrome">chrome</option>
				<option value="clouds">clouds</option>
				<option value="crimson_editor">crimson_editor</option>
				<option value="dawn">dawn</option>
				<option value="dreamweaver">dreamweaver</option>
				<option value="eclipse">eclipse</option>
				<option value="github">github</option>
				<option value="solarized_light">solarized_light</option>
				<option value="textmate">textmate</option>
				<option value="tomorrow">tomorrow</option>
				<option value="xcode">xcode</option>
			</optgroup>
			<optgroup label="dark">
				<option value="clouds_midnight">clouds_midnight</option>
				<option value="cobalt">cobalt</option>
				<option value="idle_fingers">idle_fingers</option>
				<option value="kr_theme">kr_theme</option>
				<option value="merbivore">merbivore</option>
				<option value="merbivore_soft">merbivore_soft</option>
				<option value="mono_industrial">mono_industrial</option>
				<option value="monokai">monokai</option>
				<option value="pastel_on_dark">pastel_on_dark</option>
				<option value="solarized_dark">solarized_dark</option>
				<option value="terminal">terminal</option>
				<option value="tomorrow_night">tomorrow_night</option>
				<option value="tomorrow_night_blue">tomorrow_night_blue</option>
				<option value="tomorrow_night_bright">tomorrow_night_bright</option>
				<option value="tomorrow_night_eighties">tomorrow_night_eighties</option>
				<option value="twilight">twilight</option>
				<option value="vibrant_ink">vibrant_ink</option>
			</optgroup>
		</select>
        <button onclick="selectAll();">select ALl</button>
	</div>

	<div id="editor"></div>

<script src="http://cdn.bootcss.com/ace/1.1.3/ace.js"></script>
<script>
    var source = "<%=source%>";
    var mode = "<%=mode%>";
	var theme = "github"; 
    
	/*java encode后会把空格转换为加号
	    而javascript的decodeURIComponent并不会转换回来
	    这里手动转换
	 */
	source = source.replace(/\+/g, '%20');
	source = decodeURIComponent(source);
 
	var editor = ace.edit("editor");
	editor.setValue(source); // or session.setValue
	editor.setTheme("ace/theme/"+theme);
	editor.getSession().setMode("ace/mode/"+mode);
    editor.setReadOnly(true); // false to make it editable
    
	var modeEl = document.getElementById("modeEl");
	var themeEl = document.getElementById("themeEl");
	
	function load(){
		modeEl.value = mode;//设置选中
		themeEl.value = theme;
	}       
	
    function themeChange(){
       editor.setTheme("ace/theme/"+themeEl.value);	
	}
	function modeChange(){
	   editor.getSession().setMode("ace/mode/"+modeEl.value);
	}
	function selectAll(){
		editor.selectAll();
	}
	
</script>
</body>
</html>